// 数组元素中使用的key在其兄弟之间应该是独一无二的。然而，它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的键
function Blog(props) {
    const sidebar = (
        <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
    );
    const content = props.posts.map((post) =>
        <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
    );
    return (
        <div>
      {sidebar}
      <hr />
      {content}
    </div>
    );
}

const posts = [{
    id: 1,
    title: 'Hello World',
    content: 'Welcome to learning React!'
}, {
    id: 2,
    title: 'Installation',
    content: 'You can install React from npm.'
}];
ReactDOM.render(
    <Blog posts={posts} />,
    document.getElementById('root')
);